<template>
  <div id="data-view">
    <div id="loading">
      <img src="imgs/loading.gif" style="padding-top: 300px" />
      <div id="msgDiv" style="color: white">正在拼命渲染，请稍后...</div>
    </div>
    <div id="tools">
      镜头控制：
      <button onclick="autoRotate();">自动旋转</button>
      <button onclick="cameraInfo();">获取相机信息</button>
      <button onclick="flyto();">飞入指定位置</button>
      <button onclick="cameraLock();">镜头锁定</button>
      <button onclick="cameraRange();">镜头范围</button>
      <button onclick="cameraFocus();">镜头聚焦</button>
      <button onclick="firstPerson();">第一人称</button>
      <button onclick="thirdPerson();">第三人称</button>
      <br />
      物体控制：
      <button @click="PickSwitch">拾取开关</button>
      <button onclick="pickignore();">添加拾取忽略</button>
      <button onclick="highlight();">高亮</button>
      <button onclick="highlightAll();">取消所有高亮</button>
      <button onclick="showHide();">显示隐藏</button>
      <button onclick="objectmove();">物体移动</button>
      <button onclick="objectrotate();">物体旋转</button>
      <button onclick="objectscale();">物体缩放</button>
      <button onclick="objectGet();">物体坐标</button>
      <button onclick="custom();">自定义接口</button>
      <br />
      材质设置：
      <button onclick="getmat();">获取材质</button>
      <button onclick="setmat();">设置材质</button>

      <button onclick="muted();">静音开关</button>
      <button onclick="setsize();">分辨率</button>
      <button onclick="bitrate();">清晰度</button>
      <button onclick="closeRender();">关闭渲染</button>
      <br />
      屏幕标签
      <button @click="addUpdateLabel">添加标签</button>
      <button onclick="showHideLabel();">显示隐藏标签</button>
      <button onclick="removeLabel();">移除标签</button>
    </div>
    <div id="player"></div>
  </div>
</template>

<script>
import home from "./Home";
import ue4View from "@components/ue4View";
import model from "./ModelManage";
import device from "./DeviceManage";
import simulation from "./simulation";
import material from "./MaterialManage";
import safe from "./SafeMonitor";
import patrol from "./Patrol";
export default {
  name: "Index",
  components: {
    home,
    ue4View,
    model,
    device,
    simulation,
    material,
    safe,
    patrol,
  },
  data() {
    return {
      pickId: null,
      ueRender: null,
      /**场景操作 */
      ue4Viewer: null,
      active: null,
      currentDate: new Date(),
      // 哪些菜单显示模型结构树
      showActives: ["model"],
      // 哪些菜单可以选中模型
      pickableActives: ["model", "safe", "device", "patrol"],
      activeObj: {
        /**首页 */
        home: "home",
        /**模型管理 */
        model: "model",
        /**设备管理 */
        device: "device",
        /**仿真模拟 */
        simulation: "simulation",
        /**物资管理 */
        material: "material",
        /**安全管理 */
        safe: "safe",
        /**巡查巡检 */
        patrol: "patrol",
      },
    };
  },
  methods: {
    //添加拾取监听
    pickUe4Handle() {
      let that = this;
      let ueRender = this.ueRender;
      //开启UE4场景拾取开关
      ueRender.pickable = true;
      ueRender.onPick = function (e) {
        console.log("pick:", e);
        if (that.pickabled) {
          // 实现点击物体高亮
          if (e["object"]) {
            // 反选树节点
            let node = that.selectedNodeByue4Id(e["object"].id);
            if (node && node.id) {
              // 高亮
              that.selectNodeHeightLight([node.ue4Id]);
              // 飞入模型位置
              that.flyto(node);
            }
          }
        }
      };
    },
    //忽略对地板的点击拾取
    pickignore() {
      // ueRender.call(FUNC_CODE.Object.addPickIgnore,{ids:['Floor']});

      var ids = [];
      //土地
      for (let index = 1; index <= 5; index++) {
        const element = index;
        ids.push("S_DX_0" + index);
      }
      //水体
      ids.push("S_SYSM_001");
      ids.push("S_XYSM_001");
      ids.push("S_XYSM_002");

      this.ueRender.call(FUNC_CODE.Object.addPickIgnore, { ids: ids });
    },
    addUpdateLabel() {
      let p = {
        type: "mark",
        scale: 1,
        offset: { x: 0, y: 0 },
        clickable: true,
        config: [
            {
                id: "mark1",
                title: '标签#1',
                objectid: 'S_ZSMC_24',
                value: '9999',
                valueColor: '#ff0000cc'
            }, {
                id: "mark2",
                title: '标签#2',
                objectid: "S_JSKZBQ_03",
                value: '2222',
                icon: 'mark2'
            }, {
                id: "mark3",
                title: '标签#3',
                objectid: 'S_LWS_08',
                //valueColor:'#000000ee',
                //value:'88888',
                icon: 'mark3',
                //iconUrl:''
            }
        ]
    };
    this.ueRender.call(FUNC_CODE.ScreenLable.AddOrUpdate, p);

    },

    PickSwitch() {
      let that = this;
      let ueRender = that.ueRender;
      let pickId = that.pickId;
      ueRender.pickable = !ueRender.pickable;
      if (ueRender.pickable) {
        console.log("拾取开");
        ueRender.onPick = function (e) {
          console.log("pick:", JSON.stringify(e));
          if (pickId) {
            //取消高亮
            //ueRender.call(FUNC_CODE.Object.highlight,{id:pickId,isHighlight:false});
          }
          //实现点击物体高亮
          if (e["object"]) {
            let p = {
              id: e["object"].id,
              isHighlight: true,
              style: { borderColor: "#ff00ffff" },
            };
            ueRender.call(FUNC_CODE.Object.highlight, p);
            pickId = p.id;
          }
        };
      } else {
        console.log("拾取关");
      }
    },
  },
  mounted() {
    let that = this;
    //1.请求负载均衡服务获取推流地址
    //2.
    let ueRender = new UERender({
      elementId: "player",
      serverHost: "192.168.40.99:8888", //推流服务地址
      ue4name: "test", //ue4名称
      print_inputs: true, //控制台日志开关
      pick_mouse: 0, //pick操作的触发鼠标键，0-左键，1-中建 2-右键
      onLoadStateChange: function (s) {
        //加载状态
        if (s === LoadStateType.Waiting) {
          document.getElementById("msgDiv").innerHTML = "正在请求渲染资源...";
        } else if (s === LoadStateType.Connecting) {
          document.getElementById("msgDiv").innerHTML =
            "连接渲染服务成功，正在加载场景...";
        } else if (s === LoadStateType.Connected) {
          document.getElementById("msgDiv").innerHTML =
            "场景加载成功，即将进入渲染世界...";
        }
      },
      onLoadComplete: function () {
        //加载完成后隐藏loading
        document.getElementById("loading").style.display = "none";

        that.ueRender = ueRender;

        //拾取逻辑开启
        that.pickUe4Handle();
        //忽略对地板的拾取
        that.pickignore();
      },
      //添加标签点击事件
      onLabelClick: function (e) {
        // e.id 标签ID
        // e.type  0:点击标签本地（默认） 1:点击标签某个部分，需要UE4处理
        console.log("标签点击：", e);
        if (e.id === "mark3") {
          let p = {
            type: "monitor",
            scale: 1,
            offset: { x: 30, y: 0 },
            config: [
              {
                id: "monitor1",
                clickable: true,
                objectid: "S_ZSMC_24",
                title: "2#监测点",
                state: "警告",
                time: "2022-11-11 14:17:39",
                pressure: "99.99",
                temp: "36.85℃",
              },
            ],
          };
          ueRender.call(FUNC_CODE.ScreenLable.AddOrUpdate, p);
        } else if (e.id === "monitor1" && e.type === 1) {
          console.log("查看监测历史");
        }
      },
    });
    //开启推流
    ueRender.startPlay();
    ueRender.onLabelClick = function(e){
      console.log('标签点击',e);
    };
  },
  created() {
    //当前时间自动刷新
    setInterval(() => {
      let date = new Date();
      if (this.currentDate.getMinutes() != date.getMinutes()) {
        this.currentDate = new Date();
      }
    }, 1000);
  },
  computed: {
    /**当前时间 */
    curdatetime() {
      let date = this.currentDate;
      var hour = date.getHours(); // 时
      var minutes = date.getMinutes(); // 分
      if (hour >= 0 && hour <= 9) {
        hour = "0" + hour;
      }
      if (minutes >= 0 && minutes <= 9) {
        minutes = "0" + minutes;
      }
      return hour + ":" + minutes;
    },
    /**当前时间 */
    curdate() {
      let date = this.currentDate;
      var year = date.getFullYear(); // 年
      var month = date.getMonth() + 1; // 月
      var day = date.getDate(); // 日
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (day >= 0 && day <= 9) {
        day = "0" + day;
      }
      return year + "-" + month + "-" + day;
    },
    /**当前星期几 */
    curweektext() {
      let date = this.currentDate;
      var weekArr = [
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
        "星期天",
      ];
      var week = weekArr[date.getDay()];
      return week;
    },
    /**结构树是否显示 */
    showTree() {
      let showActives = this.showActives;
      return showActives.includes(this.active);
    },
    // 模型是否可以点击
    pickabled() {
      let actives = this.pickableActives;
      return actives.includes(this.active);
    },
  },
};
</script>

<style lang="less">
html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #3f5765;
}

#data-view {
  width: 100%;
  height: 100%;
  background-color: #030409;
  color: #fff;

  video {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
  }

  button {
    color: #000;
  }

  #player {
    top: 18%;
    left: 5%;
    width: 90%;
    height: 80%;
    position: relative;
    background-color: #000;
  }

  #loading {
    z-index: 99;
    top: 18%;
    left: 5%;
    width: 90%;
    height: 80%;
    position: absolute;
    background-color: #000;
    text-align: center;
  }
  #tools {
    top: 20px;
    width: 100%;
    text-align: center;
    position: absolute;
  }
}
</style>